<template>
    <div>

        <el-button @click="showViewer=true">预览</el-button>
        <el-image-viewer
                v-if="showViewer"
                :on-close="()=>{showViewer=false}"
                :url-list="srcList" />


        <br><br><br>
<!--        <script async id="chevereto-pup-src"
src="https://imgchr.com/sdk/pup.js"
 data-url="https://imgchr.com/upload"
 data-auto-insert="bbcode-embed-medium">
 </script>-->
    </div>
</template>

<script>
    export default {
        name: "login",
        components: {
            'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
        },
        data() {
            return {
                showViewer: false,
                // src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    // 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ]
            }
        }
    }
</script>

<style scoped>
    /*.el-header, .el-footer {*/
    /*    background-color: #B3C0D1;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 60px;*/
    /*}*/

    /*.el-aside {*/
    /*    background-color: #D3DCE6;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 200px;*/
    /*}*/

    /*.el-main {*/
    /*    background-color: #E9EEF3;*/
    /*    color: #333;*/
    /*    text-align: center;*/
    /*    line-height: 160px;*/
    /*}*/

    /*body > .el-container {*/
    /*    !*margin-bottom: 40px;*!*/
    /*}*/

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*    line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*    line-height: 320px;*/
    /*}*/
</style>